<template>
	<view class="">


		<!-- 页面内容 -->
		<view class="bg-contaniner">

		</view>
		<view class="">
			<view class="tn-margin-top">
				<view class="tn-bg-white tn-text-center" style="border-radius: 20rpx;margin: 5px;">
					<view class="tn-flex tn-flex-row-around tn-padding-sm nav_title--wrap"
						style="border-radius: 20rpx 20rpx 0 0;">
						<view class="nav_title tn-cool-bg-color-15">
							<text class="tn-icon-flower tn-padding-right-sm"></text>
							期 待 您 的 到 来
							<text class="tn-icon-flower tn-padding-left-sm"></text>
						</view>
					</view>
					<view class="">
						<map id="myMap" style="width: 100%; height:350px;" :longitude="longitude" :latitude="latitude"
							:markers="markers" show-location @tap="markertap()">
						</map>
						<view class="padding-xs">
							<view class="text-center padding-xs" style="color: #786469;">日期: {{timeText}}</view>
							<view class="text-center padding-xs" style="color: #786469;">农历: 五月初一（星期日）</view>
							<view class="text-center padding-xs" style="color: #786469;">{{name}}</view>
						</view>

						<view class="tn-padding" @click="markertap()">
							<text class="tn-icon-map tn-padding-right-sm"></text>
							<text>一键导航</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 方式12 start-->
			<view class="tn-flex">
				<view class="tn-flex-1 screen-shadow tn-bg-white" style="margin: 20rpx 10rpx;padding: 20rpx 0;"
					@click="callhe()">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<tn-avatar src="https://s1.ax1x.com/2023/02/23/pSxORGn.jpg" size="lg" class="padding-bottom">
						</tn-avatar>
						<view class="tn-text-center">
							<view class="tn-text-ellipsis tn-text-xl" style="color: #f1bbba;">联系新郎</view>
						</view>
					</view>
				</view>
				<view class="tn-flex-1 screen-shadow tn-bg-white" style="margin: 20rpx 10rpx;padding: 20rpx 0;"
					@click="callshe()">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<tn-avatar src="https://s1.ax1x.com/2023/02/23/pSxOW2q.jpg" size="lg" class="padding-bottom">
						</tn-avatar>
						<view class="tn-text-center">
							<view class="tn-text-ellipsis tn-text-xl" style="color: #f1bbba;">联系新娘</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import template_page_mixin from '@/uni_modules/tuniao-ui/libs/mixin/template_page_mixin.js';
	import {weddingConfig} from "@/api/common/api";
	export default {
		name: 'navigation',
		mixins: [template_page_mixin],
		data() {
			return {
				name: "",
				address: "",
				latitude: '',
				longitude: '',
				markers: [{
					id: 1,
					iconPath: '../../static/images/location.png',
					latitude: '',
					longitude: '',
					width: 50,
					height: 50
				}],
				hePhone: '',
				shePhone: '',
				timeText: ""
			}
		},
		onReady() {
			this.init();
		},
		methods: {
			init(){
				weddingConfig().then(res => {
					if (res.code == 200) {
						this.name=res.data.hotelName;
						this.address=res.data.hotelAddress;
						this.latitude=res.data.hotelLatitude;
						this.longitude=res.data.hotelLongitude;
						this.hePhone=res.data.groomPhone;
						this.shePhone=res.data.bridePhone;
						this.markers[0].latitude=res.data.hotelLatitude;
						this.markers[0].longitude=res.data.hotelLongitude;
						this.timeText=res.data.weddingDate;
					}
				})
			},
			markertap() {
				let name=this.name;
				let address=this.address;
				let latitude=this.latitude;
				let longitude=this.longitude;
				uni.openLocation({
					latitude:Number(latitude),
					longitude:Number(longitude),
					name:name,
					address:address
				});
			},
			callhe() {
				uni.makePhoneCall({
					phoneNumber: this.hePhone
				});
			},
			callshe() {
				console.log("1111")
				uni.makePhoneCall({
					phoneNumber: this.shePhone
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}

	.screen-shadow {
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
		border-radius: 20rpx;
	}

	.contaniner {
		height: 100%;
		background-image: url(https://s1.ax1x.com/2023/03/30/ppgx5hF.png);
	}

	/* 移动背景部分 start*/
	.bg-contaniner {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		--text-color: hsl(0 95% 60%);
		--bg-color: hsl(0 0% 100%);
		--bg-size: 750rpx;
		height: 100%;
		display: grid;
		place-items: center;
		place-content: center;
		overflow: hidden;
		background-color: #f4f4f4;
		z-index: -1;
	}

	.bg-contaniner::before {
		--size: 150vmax;

		grid-area: body;
		content: "";
		inline-size: var(--size);
		block-size: var(--size);
		background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
		background-size: var(--bg-size);
		background-repeat: repeat;
		transform: rotate(0deg);
		opacity: 0.15;
		animation: bg 6s linear infinite;
	}

	@media (prefers-reduced-motion: reduce) {
		.bg-contaniner::before {
			animation-duration: 0s;
		}
	}

	@keyframes bg {
		to {
			background-position: 0 calc(var(--bg-size) * -1);
		}
	}

	/* 移动背景部分 end*/
	/* 标题 start */
	.nav_title {
		-webkit-background-clip: text;
		color: #a79c8e;

		&--wrap {
			position: relative;
			display: flex;
			height: 120rpx;
			font-size: 40rpx;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
			background-size: cover;
		}
	}

	/* 标题 end */
</style>
